<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>绑定商家手机号</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--标准mui.css-->
	<link rel="stylesheet" href="../../css/utils/mui.min.css">
	<style>
		.login-content {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			background: url(../../img/login/phone-body-back.png) no-repeat;
			background-size: 100% 100%;
	    	overflow: auto;
		}
		.login-logo {
			text-align: center;
			margin-top: 50px;
		}
		.login-logo img {
		    width: 75px;
		    height: 75px;
		}
		.login-info {
			width: 300px;
    		margin: 20px auto;
		}
		.input-border {
		    position: relative;
		    margin-bottom: 20px;
		    border-bottom: 1px solid #022250;
		}
		.input-border img {
		    display: inline-block;
		    margin-left: 20px;
		    width: 14px;
		    vertical-align: middle;
		}
		.input-border input {
		    display: inline-block;
		    width: calc(100% - 40px);
		    /*vertical-align: middle;*/
		    background-color: transparent;
		    border: none;
		    box-shadow: none;
		    color: #fff;
		}
		.validata-prompt {
		    display: none;
		    position: absolute;
		    margin-top: 5px;
		    margin-left: 20px;
		    font-size: 12px;
		    color: red;
		}
		.login-button {
		    margin-top: 60px;
		}
		.login-button .mui-btn {
			width: 100%;
			font-size: 16px;
		}
	</style>
</head>
<body>
	<!--<header id="header" class="mui-bar mui-bar-nav">
		<h1 class="mui-title">绑定商家手机号</h1>
	</header>-->
	<div class="mui-content login-content">
		<div class="login-logo">
			<img src="../../img/login/logo2.png" />
		</div>
		<div class="login-info">
			<div class="input-border">
				<img src="../../img/login/user-name.png">
				<input type="text" id="phone" class="form-control" placeholder="用户名(手机账户)">
				<div id="phoneValidata" class="validata-prompt">账户格式不对</div>
			</div>
			<div class="input-border">
				<img src="../../img/login/user-password.png">
				<input type="password" id="password" class="form-control required" placeholder="密码">
				<div id="passwordValidata" class="validata-prompt">密码不能低于6位</div>
			</div>
			<div class="login-button">
				<button id="login" type="button" class="mui-btn mui-btn-primary" data-loading-text="提交中" data-loading-icon-position="right">绑&nbsp;&nbsp;定</button>
			</div>
		</div>
	</div>	
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/mui.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/regular.js" ></script>
	<script type="text/javascript" src="../../js/utils/boot.js?version=2" ></script>
	<script>
		var customerID = base.getParameter("customerID");
		$(function(){
			
		});
		
		$("#login").on("tap", function(){
			var phone = $("#phone").val();
			var password = $("#password").val();
			if (!checkPhone(phone)) {
				$("#phoneValidata").text("账户格式不对").show();
				return;
			}
			if (password.length < 6) {
				$("#passwordValidata").text("密码不能低于6位").show();
				return;
			}
			mui(this).button('loading');
			$("#phoneValidata").hide();
			$("#passwordValidata").hide();
			base.postData(base.url.bindingMerchant,{phone:phone,password:password,customerID:customerID},bindingMerchantCallback);
		});
		
		function bindingMerchantCallback(data) {
			mui("#login").button('reset');
			mui.alert('请点击确定按钮', data.msg, function() {
				$("#password").val("");
				$("#phone").val("");
			});
		}
	</script>	
</body>
</html>
